<template>
  <div class="foot">
    <div class="text" @click="$router.push('/lucky/frequency/record')">{{ $t('lucky.doc3') }}</div>
    <Btn :isOn="true"
         :btnText="$t('lucky.doc2',{n:luckyInfo.remainingCount || 0})"
         class="btn_box"
    />
    <div class="addUp-box">
      <div class="addUp" >
        {{ $t('lucky.doc4') }}：
        <span>{{ luckyInfo.useCount }}</span>
      </div>
    </div>
    <div class="tips">
      <div class="tips-title">{{$t('lucky.doc5')}}</div>
      <div class="tips-content">{{$t('lucky.doc6')}}</div>
    </div>

  </div>
</template>

<script>
import Btn from "@/components/public/Btn.vue";

export default {
  components: {Btn},
  props: ['luckyInfo'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.foot {

  padding: 0 .32rem .4rem;
  margin-top: .48rem;

  .text {
    text-align: center;
    color: #5CA2FF;
    font-family: "PingFang TC";
    font-size: .28rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
  }

  .btn-box {
    margin-top: .48rem;
  }

  .addUp-box {
    display: flex;
    align-items: center;
    justify-content: center;

    .addUp {
      width: fit-content;
      margin-top: .48rem;
      color: #FFF;
      font-family: "PingFang TC";
      font-size: .24rem;
      font-style: normal;
      font-weight: 600;
      line-height: 12px; /* 100% */
      padding-bottom: .16rem;
      position: relative;

      span {
        color: #FFD200;
        font-size: .32rem;
      }

      &:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: .04rem;
        background: var(--CObackgroundLinear1);
      }
    }
  }

  .tips {
    margin-top: .48rem;
    border-radius: .24rem;
    background: #1A202E;
    padding: .32rem .24rem;

    line-height: 1.2;
    .tips-title{
      text-align: center;
      color: #FFF;
      font-size: .28rem;
      font-style: normal;
      font-weight: 600;
    }
    .tips-content{
      margin-top: .28rem;
      color: rgba(255, 255, 255, 0.90);
      font-size: .24rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}
</style>